<template>
	<view class="page-container bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder title="我的订单" :leftIconSize="0"></up-navbar>

		<view
			class="content-wrap"
			:style="{
				top: `calc(${commonStore.statusBarHeight}px + ${commonStore.navbarHeight}px)`,
				bottom: `calc(${commonStore.safeAreaBottomHeight}px + ${commonStore.tabbarHeight}px)`,
			}"
		>
			<view class="full-height">
				<zjy-tabs
					:tabs="tabs"
					:flex="true"
					:activeId="activeId"
					@tabClick="changeTab"
					:showBadge="true"
					bgColor="#ffffff"
				/>

				<scroll-view
					ref="scrollViewRef"
					:scroll-y="true"
					@scrolltolower="loadMore"
					:refresher-enabled="true"
					:refresher-triggered="triggered"
					@refresherpulling="onPulling"
					@refresherrefresh="onRefresh"
					@refresherrestore="onRestore"
					@refresherabort="onAbort"
					class="plr-24"
					:style="{
						height: scrollViewHeight,
					}"
				>
					<template v-if="listData && listData.length > 0">
						<view
							v-for="(orderItem, index) in listData"
							:key="index"
							:class="['zjy-card-form', { 'mt-16': index == 0, 'mb-16': index < listData.length - 1 }]"
							@click="pageToOrderTicketDetail(orderItem.id)"
						>
							<view class="flex-a pb-24">
								<image :src="orderItem.store_logo_url" class="icon-76 mr-16 circle" />
								<view class="flex-1">
									<view class="flex-a space-between">
										<view class="flex-a">
											<text class="fs-28 m-w-450 text-ellipsis">
												{{ orderItem.store_name }}
											</text>
											<text class="arrow-right ml-4"></text>
										</view>
										<view :class="['fs-28', filterStateColor(orderItem.state)]">
											{{ orderItem.state_name }}
										</view>
									</view>
								</view>
							</view>
							<view class="order-content">
								<image :src="orderItem.sku_cover_url" />
								<view class="flex-1 space-between">
									<view class="mr-40 flex-col space-between">
										<view>
											<view class="fs-28 font-500 text-2-ellipsis">
												{{ orderItem.sku_display_name }}
											</view>
										</view>
										<view class="mt-4 c-grey-86">
											游玩日期 {{ orderItem.tour_date }}
											<view>下单时间 {{ orderItem.create_time }}</view>
										</view>
									</view>
									<view class="text-right">
										<view>
											<text class="fs-22 mr-4">&yen;</text>
											<text class="font-500 fs-28">
												{{ priceInCent(orderItem.price_in_cent) }}
											</text>
										</view>
										<view class="c-grey-86">x{{ orderItem.net_quantity }}</view>
									</view>
								</view>
							</view>
							<view class="pt-24 text-right font-bold">
								<text class="fs-28 mr-12">合计</text>
								<text class="fs-20 mr-4">&yen;</text>
								<text class="fs-32 font-oppo">
									{{ priceInCent(orderItem.amount_in_cent) }}
								</text>
							</view>
							<view class="bottom mt-24 flex-j-end">
								<template v-if="orderItem.state == OrderStatus.INITIAL">
									<zjy-button type="line" size="medium" @click="cancelOrder(orderItem.id)">
										取消订单
									</zjy-button>
									<zjy-button
										size="medium"
										class="ml-16"
										@click="navigateTo('/pages/order/pay', { stmt_id: orderItem.stmt_id })"
									>
										立即支付
									</zjy-button>
								</template>
							</view>
						</view>
						<view style="height: 16rpx; width: 100%"></view>
					</template>
					<zjy-empty emptyText="暂无订单" v-else-if="!freshing && searched"></zjy-empty>
				</scroll-view>
			</view>
		</view>
		<footer-bar :current="1" />
	</view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app"
import FooterBar from "@/components/footer/footer-bar.vue"
import { priceInCent } from "@/mixins/mixins"
import useCommonStore from "@/store/common"
import { freshLoading } from "@/utils/fresh-loading"
import { getMenuButtonRectVal } from "@/utils/system"
import { navigateTo, pageToOrderTicketDetail } from "@/utils/page-redirect"
import type { ZjyTabItem } from "@/types/common"
import { OrderStatus, OrderStatusMap } from "@/constants/order"
import { $cancelOrder, $getOrderList } from "@/api/order"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const scrollViewHeight = `calc(100vh - ${
	commonStore.statusBarHeight +
	commonStore.navbarHeight +
	commonStore.safeAreaBottomHeight +
	commonStore.tabbarHeight +
	45
}px)`
const scrollViewRef = ref<any>()
const searched = ref(false)
//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
	updateListParams,
} = freshLoadingRef
freshLoadingRef.listService.value = $getOrderList
getListSuccessCallback.value = () => {
	searched.value = true
}
updateListParams.value = () => {
	return {
		state: activeId.value !== OrderStatus.ALL ? activeId.value : "",
	}
}
//#endregion

const activeId = ref<number>(0)
const tabs = ref<ZjyTabItem[]>([
	{
		id: OrderStatus.ALL,
		name: "全部",
	},
	{
		id: OrderStatus.INITIAL,
		name: "待付款",
	},
	{
		id: OrderStatus.AVAILABLE,
		name: "待出行",
	},
	{
		id: OrderStatus.DONE,
		name: "待评价",
	},
	{
		id: OrderStatus.CLOSED,
		name: "退款售后",
	},
])
const changeTab = (id: number) => {
	activeId.value = id
	getListData(true)
}

const filterStateColor = (state: number) => {
	return OrderStatusMap.find((item) => item.id == state)?.color || ""
}

//#region 取消订单
const cancelOrder = (orderId: string) => {
	uni.showModal({
		title: "提示",
		content: "您确定要取消订单吗？",
		success: (res) => {
			if (res.confirm) {
				$cancelOrder(orderId).then(() => {
					uni.showToast({
						title: "操作成功",
						icon: "none",
					})
					setTimeout(() => {
						getListData(true)
						searched.value = false
					}, 2000)
				})
			}
		},
	})
}
//#endregion

const titleHeight = ref<number>(0)
const menuWidth = ref<number>(0)

onShow(() => {
	getListData(true)
	searched.value = false
})
onLoad(() => {
	//获取胶囊位置和导航栏高度
	const { menuWidthVal, titleHeightVal } = getMenuButtonRectVal()
	menuWidth.value = menuWidthVal
	titleHeight.value = titleHeightVal
})
</script>
<style lang="scss" scoped>
.page-container {
	padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
}
.content-wrap {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
}
.order-content {
	display: flex;
	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		margin-right: 16rpx;
	}
}
</style>
